<template>
  <view class="carousel">
    <view v-for="(item, index) in userAskList" :key="index" :class="['userAskItem',{
        active: index === activeIndex,
        next: index === nextIndex,
        leave: index === leaveIndex,
    }]">
      {{ item.content }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userAskList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      obj: {
        // active: index === activeIndex,
        // next: index === nextIndex,
        // leave: index === leaveIndex,
      },
      activeIndex: 0,
      nextIndex: 1,
      leaveIndex: null,
      timer: null,
    };
  },
  methods: {
    updateIndex() {
      this.leaveIndex = this.activeIndex;
      this.activeIndex = this.nextIndex;
      this.nextIndex = (this.nextIndex + 1) % this.userAskList.length;

      // 重置 leaveIndex 一段时间后，使其动画消失
      setTimeout(() => {
        this.leaveIndex = null;
      }, 500);
    },
  },
  onReady() {
    this.timer = setInterval(this.updateIndex, 5000);
  },
  onUnload() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.carousel {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 300rpx;
  height: 80rpx; /* 高度调整以适应两个项目 */
  overflow: hidden;
  padding-right: 24rpx;
}
.userAskItem {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: absolute;
  right: 24rpx;
  width: 300rpx;
  height: 40rpx;
  text-align: right;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.5s, font-size 0.5s, top 0.5s;
  font-size: 22rpx;
}

.userAskItem.active {
  display: inline-block;
  color: #ff9657;
  opacity: 1;
  top: 0rpx;
}

.userAskItem.next {
  display: inline-block;
  color: #c7d3dd;
  font-size: 20rpx;
  opacity: 1;
  top: 40rpx;
}
.userAskItem.leave {
  display: inline-block;
  opacity: 0;
  top: -50rpx;
}
</style>